/*
 * @Author: 肖思汗 
 * @Date: 2025-06-25 09:26:19 
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2025-07-12 16:20:53
 */


.textModel {

    .navBar {
        position: relative;
        background: none;
        margin-bottom: 0rpx;

    }

    .tabsContainer {
        position: relative;

        .tabContainer {
            padding: 10rpx;
        }
    }

    .tabs {
        .tab {
            display: inline-block;
            color: #999999;
            font-size: 40rpx;
            // border-bottom: 2rpx solid #ffffff;
            padding: 20rpx;

            &.active {
                font-weight: bold;
                color: #000000;
                // border-bottom: 2rpx solid #fd7901;
            }
        }
    }

    .fontsList {
        height: 360rpx;
        width: 100%;
        overflow-y: auto;
        display: flex;
        flex-wrap: wrap;

        &::-webkit-scrollbar {
            width: 2px;
            height: 2px;
            background-color: rgba(0, 0, 0, 0);
        }

        &::-webkit-scrollbar-track {
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
            border-radius: 2px;
            background-color: rgba(0, 0, 0, 0);
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 2px;
            background-color: #fd7901;
        }

        .fontImgBox {
            position: relative;
            width: calc(50% - 48rpx);
            height: 64rpx;
            margin: 10rpx;
            padding: 10rpx;
            border: 2px solid #e0e0e0;
            border-radius: 10rpx;
            text-align: center;

            .loading {
                position: absolute;
                width: 20rpx;
                height: 20rpx;
                right: 10rpx;
                bottom: 10rpx;
            }

            &.active {
                border: 2px solid #fd7901;
            }

            .fontImg {
                max-width: 90%;
                max-height: 90%;
            }
        }

    }

    .styleBox {
        height: 360rpx;
        box-sizing: border-box;
        width: 100%;
        overflow-y: auto;

        &::-webkit-scrollbar {
            width: 2px;
            height: 2px;
            background-color: rgba(0, 0, 0, 0);
        }

        &::-webkit-scrollbar-track {
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
            border-radius: 2px;
            background-color: rgba(0, 0, 0, 0);
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 2px;
            background-color: #fd7901;
        }

        .colorRow {
            margin-top: 20rpx;
        }

        .colorLable {
            display: inline-block;
            margin-top: 28rpx;
        }

        .strokeWidth {
            display: inline-block;
            margin-top: 46rpx;
        }

        .colorItemBox {
            white-space: nowrap;
            overflow-x: scroll;
            padding-bottom: 20rpx;
            height: 90rpx;
            overflow-y: hidden;

            &::-webkit-scrollbar {
                display: none;
                width: 0;
                height: 0;
                color: transparent;
            }

            .colorItemBoder {
                position: relative;
                display: inline-block;
                width: 50rpx;
                height: 50rpx;
                border-radius: 50%;
                margin: 10rpx 18rpx 0rpx 0rpx;
                box-shadow: none;

                &.active {
                    box-shadow: 4rpx 4rpx 4rpx rgba(0, 0, 0, 0.5);
                }

                .colorItem {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    display: inline-block;
                    width: 42rpx;
                    height: 42rpx;
                    border-radius: 50%;
                    box-shadow: 4rpx 4rpx 4rpx rgba(0, 0, 0, 0.5);

                    &.active {
                        box-shadow: 1rpx 1rpx 6rpx rgba(0, 0, 0, 0.5);
                        // box-shadow: none;
                    }
                }
            }
        }

        .range {
            margin-top: 58rpx;
        }


    }

    .scrollFilter {
        overflow-x: auto;
        padding: 10rpx;
        white-space: nowrap;

        &::-webkit-scrollbar {
            display: none;
        }

    }



    .inputContainer {
        width: 100%;
        align-items: center; // 垂直居中

        .inputBox {
            position: relative;
            width: 100%;
            border-radius: 33rpx;
            margin: 10rpx 10rpx 10rpx 0rpx;
            height: 80rpx;
            overflow-y: auto;

            .textArea {
                background-color: #f5f5f5;
                padding: 10rpx 80rpx 10rpx 40rpx;
                min-height: 80rpx;
            }
        }

        .okButton {
            position: absolute;
            right: 40rpx;
            top: 48rpx;
        }


        .inputField {
            flex: 1;
        }

    }



    .btnRow {
        white-space: normal;

        .btn {
            display: inline-block;
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            background-color: rgb(255, 255, 255);
            border: 10rpx solid rgb(255, 255, 255);
            margin: 10rpx 20rpx;

            &.active {
                background-color: rgb(214, 214, 214);
                border: 10rpx solid rgb(214, 214, 214);
            }
        }
    }




}